<script setup lang="ts">
  import { ref, onMounted, toRaw, reactive } from "vue";
  import { useRoute } from "vue-router";
  import { ArrowRight } from "@element-plus/icons-vue";
  import {
    getOderById,
    getOrderLogisticsById,
    type OrderDetail,
    type LogisticsStatusNode,
  } from "@/api/order";

  const route = useRoute();
  const id = route.params.id;
  const BREADLIST = [
    { name: "用户中心", path: "#" },
    { name: "订单记录", path: "/user/order" },
    { name: "订单详情", path: "#" },
  ];

  const productList = ref<Array<OrderDetail>>();
  /** 商品id列表 */
  const goodids = ref<Array<number>>([]);
  /** 物流信息列表 */
  // let logisticsInfo = reactive<Array<LogisticsStatusNode>>([]);
  let logisticsInfo = ref([]);

  let emptyLogisticsInfo = {
    data: [{ context: "暂无快递信息", time: "" }],
  };
  getOderById(id)
    .then((res) => {
      // 处理 getOderById 的结果
      productList.value = res.data.orderlist[0].productinfo;
      let goodids = res.data.orderlist[0].productinfo.map(
        (item) => item.fgoodsid
      );
      return goodids; // 返回处理后的结果
    })
    .then((res1) => {
      res1.forEach((element) => {
        getOrderLogisticsById(id, element)
          .then((res) => {
            logisticsInfo.value.push(res.data.logisticsinfo);
          })
          .catch(() => logisticsInfo.value.push(emptyLogisticsInfo));
      });
    });
</script>

<template>
  <el-breadcrumb :separator-icon="ArrowRight" class="pb-[12px]">
    <el-breadcrumb-item v-for="item in BREADLIST" :to="item.path">{{
      item.name
    }}</el-breadcrumb-item>
  </el-breadcrumb>

  <div class="w-full flex flex-col">
    <!-- 配送信息 -->
    <el-card class="flex-1 mb-[10px]" shadow="never">
      <template #header>
        <div>配送信息</div>
      </template>
      <div>
        <table class="min-w-full divide-y divide-gray-200 overflow-x-auto">
          <tbody>
            <!-- 表头 -->
            <tr class="h-[20px]">
              <td
                class="text-[#909399] font-bold text-[14px] box-border sm:w-auto"
              >
                商品名称
              </td>
              <td
                class="text-[#909399] font-bold text-[14px] w-[160px] md:w-auto"
              >
                物流状态
              </td>
            </tr>

            <tr v-for="(item, index) in logisticsInfo.reverse()" :key="index">
              <td
                class="py-2 border-solid border-0 border-b border-[#e5e5e5] text-[12px] md:text-[14px]"
              >
                {{ productList[index].fgoodname }}
              </td>
              <td
                class="py-2 border-solid border-0 border-b border-[#e5e5e5] text-[12px] md:text-[14px]"
              >
                <div>
                  <div>{{ item.data[0].time }}</div>
                  <div>
                    {{ item.data[0].context }}
                  </div>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </el-card>

    <!-- 订单信息 -->
    <!-- <el-card class="flex-1 mb-[10px]" shadow="never">
      <template #header>
        <div>订单信息</div>
      </template>
      <div>
        <div><span>商品名称</span><span>配送进度</span></div>
      </div>
    </el-card> -->

    <!-- 商品信息 -->
    <el-card class="flex-1 mb-[10px]" shadow="never">
      <template #header>
        <div>商品信息</div>
      </template>
      <div>
        <div
          class="flex items-center py-[12px] border-0 border-b border-solid border-[#e5e5e5]"
          v-for="item in productList"
          :key="item.fgoodsid"
        >
          <!-- 商品信息区域 -->
          <div class="mr-[12px]">
            <div class="pb-2 w-[220px] md:w-[436px]">
              {{ item.fgoodname }}
            </div>
            <div class="md:flex text-[#969696] text-[12px]">
              <div class="pb-1 pr-2">货号:{{ item.fgoodcode }}</div>
              <div class="pb-1 pr-2">品牌:{{ item.fbrand }}</div>
              <div class="pb-1 pr-2">规格:{{ item.fspec }}</div>
              <div class="pb-1 pr-2">包装:{{ item.funit }}</div>
            </div>
          </div>
          <!-- 价格区域 -->
          <div
            class="text-wrap md:w-auto md:text-[16px] md:flex-1 md:flex md:justify-around"
          >
            <div class="pb-1 pr-2">数量:{{ item.fquantity }}</div>
            <div class="pb-1 pr-2">单价:{{ item.fprice }}</div>
            <div class="pb-1 pr-2">
              总价: {{ item.fquantity * item.fprice }}
            </div>
          </div>
        </div>
      </div>
    </el-card>
    <!-- <div v-for="(item, index) in logisticsInfo.reverse()" :key="index">
      <div>{{ item.data[0] }}</div>
    </div> -->
  </div>
</template>

<style lang="scss" scoped>
  .el-card > :deep(.el-card__body) {
    padding: 8px 20px;
  }
</style>
